import { LoaderCircle } from "lucide-vue-next";
import { defineComponent } from "vue";
import { RouterLink, useRoute } from "vue-router";
import vueIconUrl from "@/assets/vue.svg";
import Avatar from "@/components/Avatar";
import Button from "@/components/Button";
import useAuthStore from "@/store/auth";

export default defineComponent({
  setup(_p, { slots }) {
    const route = useRoute();
    const auth = useAuthStore();

    return () => (
      <div
        class="min-h-screen grid grid-rows-[auto_1fr_auto]"
        style={{ background: "linear-gradient(45deg, #EEEDF5, #f9f8ff)" }}
      >
        <nav class="px-6 py-2 flex items-center gap-4 bg-purple-50/95 border-b border-gray-300 sticky top-0 z-10 h-12">
          <img class="w-6" src="/vite.svg" alt="vite icon" />
          <img class="w-6" src={vueIconUrl} alt="vue icon" />
          <RouterLink to="/">Home</RouterLink>
          <RouterLink to="/demo">Demo</RouterLink>
          {auth.auth.status === "failed" && <RouterLink to="/login">Login</RouterLink>}
          {auth.auth.status === "loading" && <LoaderCircle class="animate-spin" />}
          {auth.auth.status === "ok" && (
            <>
              <div class="inline-flex items-center gap-4">
                <Avatar src={auth.auth.avatar} alt="my avatar" /> {auth.auth.username}
              </div>
              <Button size="sm" variant="outline" onClick={() => auth.logout()}>
                Logout
              </Button>
            </>
          )}
        </nav>
        <main>{slots.default?.()}</main>
        <footer class="bg-purple-50 border-t border-gray-300 px-4 py-2">
          <p>Footer</p>
          <p>
            <strong>Current route path:</strong> {route.fullPath}
          </p>
        </footer>
      </div>
    );
  },
});
